<template>
    <div id="app">
        <div id="app">
            <div class="card-panel" @click="handleSetLineChartData('newVisitis')"
                :class="{ 'highlight': highlighted.includes('newVisitis') }">1</div>
            <div class="card-panel" @click="handleSetLineChartData('messages')"
                :class="{ 'highlight': highlighted.includes('messages') }">2</div>
            <div class="card-panel" @click="handleSetLineChartData('purchases')"
                :class="{ 'highlight': highlighted.includes('purchases') }">3</div>
            <div class="card-panel" @click="handleSetLineChartData('shoppings')"
                :class="{ 'highlight': highlighted.includes('shoppings') }">4</div>
        </div>
    </div>
</template>  
    
<script>
export default {
    data() {
        return {
            highlighted: ['newVisitis', 'messages', 'shoppings'], // 初始化时，前两个元素高亮  
        }

    },
    mounted() {
        // 给默认选中的元素添加标记  
        // this.$refs.div1.classList.add('selected');
        // this.$refs.div2.classList.add('selected');
    },
    methods: {
        handleSetLineChartData(value) {

            // 如果点击的元素已经在高亮数组中，我们不需要做任何操作  
            if (this.highlighted.includes(value)) {
                return;
            }
            // 移除旧的高亮元素  
            this.highlighted.shift();
            // 添加新的高亮元素  
            this.highlighted.push(value);
            console.log(JSON.stringify(this.highlighted));
        },
    }
};
</script>
<style>
.selected {
    background-color: red
}

.active {
    background-color: yellow;
    /* 你可以设置任何你想要的颜色或样式 */
}

.highlight {
    border-top: 1px solid yellow;
}
</style>